import React, { useRef, useState, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';

function GaugeChart({ data, forCOP }) {
    const echartsRef = useRef();
    let color = forCOP ? '#00b42a' : '#f53f3f';
    let seriesData = [
        // 最底层仪表盘
        {
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '80%',
            progress:{
                show:true,
                width:14,
                roundCap:true,
                itemStyle:{ color }
            },
            axisLine: {
                roundCap:true,
                lineStyle: {
                    color: [[1, '#808184']],
                    width: 14
                }
            },
            splitLine: {
                distance:0,
                length: 12,
                lineStyle: {
                    width:1,
                    color: 'rgba(255, 255, 255, 0.25)'
                }
            },
            axisTick: {
                distance:0,
                length: 6,
                lineStyle: {
                    width:1,
                    color: 'rgba(255, 255, 255, 0.25)'
                }
            },
            pointer:{ show:false },
            axisLabel:{ show:false },
            anchor:{ show:false },
            detail: {
                valueAnimation: true,
                precision: 1
            },
            title: {
                offsetCenter: [0, '30%'],

            },
            detail:{
                color:'#fff',
                fontWeight:'normal',
                offsetCenter:[0, '0%']
            },
            data: [
                {
                    value: 68,
                    name: forCOP ? '' : 'kw/kw'
                }
            ]
        },
        // 中层仪表盘定义指针icon
        {
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '80%',
            zlevel:1,
            axisLine:{ show:false },
            splitLine: { show:false },
            axisTick: { show:false },
            axisLabel:{ show:false },
            anchor:{ show:false },
            pointer: {
                offsetCenter: [0, '-65%'],
                icon:'path://M512 42.666667C252.288 42.666667 42.666667 252.288 42.666667 512s209.621333 469.333333 469.333333 469.333333 469.333333-209.621333 469.333333-469.333333S771.712 42.666667 512 42.666667z m0 611.712A142.890667 142.890667 0 0 1 369.621333 512 142.890667 142.890667 0 0 1 512 369.621333 142.890667 142.890667 0 0 1 654.378667 512 142.890667 142.890667 0 0 1 512 654.378667z',
                keepAspect:true,
                width:20,
                itemStyle: {
                    color: '#fff',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowOffsetX:4,
                    shadowOffsetY:4,
                    shadowBlur: 10
                }
            },
            data: [
                {
                    value: 68,
                    name: 'PLP',
                    title:{ show:false },
                    detail:{ show:false }
                }
            ]
        },
        {
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '56%',
            zlevel:2,
            progress:{
                show:true,
                width:2,
                roundCap:true,
                itemStyle:{ color }
            },
            axisLine: {
                roundCap:true,
                lineStyle: {
                    color: [[1, '#808184']],
                    width: 2
                }
            },
            splitLine:{ show:false },
            axisTick:{ show:false },
            axisLabel:{ show:false },
            anchor:{ show:false },
            pointer:{ show:false },
            data: [
                {
                    value: 68,
                    name: 'PLP',
                    title:{ show:false },
                    detail:{ show:false }
                }
            ]
        }
    ]
    return (
        <ReactEcharts
            notMerge={true}
            style={{ height: '100%' }}
            option={{

                series: seriesData
            }}
        />
    )
}

function areEqual(prevProps, nextProps) {
    if (prevProps.data !== nextProps.data) {
        return false;
    } else {
        return true;
    }
}

export default React.memo(GaugeChart, areEqual);